<template>
  <div>
    <a-row>
      <a-col span="5" align="center" justify="space-around">
        <a-row type="flex">
          <a-button type="primary" @click="proAdd">添加收费项目</a-button>
        </a-row>
      </a-col>
      <a-col span="12" align="right" offset="7">
        <a-row type="flex" justify="space-around">
          <a-col span="7">
            <a-select defaultValue="全部" @change="handleChange">
              <a-select-option value="全部">全部</a-select-option>
              <a-select-option value="1">周期性</a-select-option>
              <a-select-option value="2">临时性</a-select-option>
              <a-select-option value="3">押金性</a-select-option>
            </a-select>
          </a-col>
          <a-col span="15">
            <a-input-search @search="search_toll" placeholder="请输入项目名称"></a-input-search>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <br/>
    <a-table rowKey="id" :dataSource="data" :showHeader="false">
      <a-table-column>
        <template slot-scope="text, record">
          <a-row>
            <a-card>
              <p slot="title">
                <span style="padding-right: 25px;">{{record.name}}</span>类型：
                <span style="padding-left: 6px; color: red;">{{record.project_text}}</span>
              </p>
              <span slot="extra" style="margin-right: 10px">
                <a-icon type="plus" @click="addDetail(record.id, record.name,record.project,)" style="cursor:pointer;"/>
              </span>
              <span slot="extra" style="margin-right: 10px">
                <a-icon type="form" @click="editDetailed(record)" style="cursor:pointer;" />
              </span>
              <span slot="extra" style="margin-right: 10px">
                <a-popover trigger="click" v-model="record['visible']">
                  <a-row slot="content">
                    <p>确定要删除此项目吗</p>
                    <a-button
                      size="small"
                      style="margin-right: 10px;"
                      type="danger"
                      @click="delProject(record.id)"
                    >确定</a-button>
                    <a-button size="small" @click="hide(record)">取消</a-button>
                  </a-row>
                  <a-icon type="delete" style="cursor:pointer;"/>
                </a-popover>
              </span>
              <a-table
                :columns="columns"
                :pagination="false"
                :dataSource="record.detail"
                v-if="record.detail"
              >
                <template slot="price" slot-scope="text, record">
                  ¥{{text}}
                </template>
                <a slot="action" slot-scope="text, record" href="javascript:;">
                  <a-dropdown :trigger="['click']">
                    <a class="ant-dropdown-link" href="#">
                      操作
                      <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                      <a-menu-item key="0">
                        <!-- <a href="javascript:void(0)">查看</a> -->
                      </a-menu-item>
                      <a-menu-item key="1" v-if="record.style<4 && record.style !== 2">
                        <a href="javascript:void(0)"
                           @click="showTest(record.style, record.fixed_price, record.price, record.formula_id)">测试</a>
                        <a-modal
                          :title="record.name"
                          :visible="testVisible"
                          @cancel="testCancel"
                          okText="计算"
                          @ok="countMe(record.style, record.fixed_price, record.price, record.count_week,record.formula_id)"
                        >
                          <a-row v-if="areaInput">
                            <a-col span="5">
                              {{record.count_style}}：
                            </a-col>
                            <a-col span="10">
                              <a-input v-model="area"></a-input>
                            </a-col>
                          </a-row>
                          <a-row v-if="selfCount">
                            <a-form :form="form" @submit="countMe">
                              <a-row v-for="(item, index) in selfList" :key="index" style="margin-bottom: 20px;">
                                <a-col span="5">
                                  {{item}} :
                                </a-col>
                                <a-col span="10">
                                  <a-input v-model="varList[index]"></a-input>
                                </a-col>
                              </a-row>
                            </a-form>
                          </a-row>
                          <p v-if="showPrice">结果: {{ price }}</p>
                        </a-modal>
                      </a-menu-item>
                      <a-menu-item key="2">
                        <a href="javascript:void(0)" @click="editDetail(record.id, record.name)">编辑</a>
                      </a-menu-item>
                      <a-menu-item key="3">
                        <a href="javascript:void(0)" @click="delDetail(record)">删除</a>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </a>
              </a-table>
            </a-card>
          </a-row>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>
<script>
  import { getTollProject, delTollProject, delTollDetail, getFormulaArg, comFormulaPrice } from '@/api/cashier'
  import { mapGetters } from 'vuex'

  export default {
    name: 'charge_toll_project',
    data() {
      return {
        form: this.$form.createForm(this),
        columns: [
          { title: '收费标准', dataIndex: 'name' },
          { title: '单价', dataIndex: 'price',scopedSlots: { customRender: 'price' } },
          { title: '计量方式', dataIndex: 'count_style' },
          { title: '收费周期(月)', dataIndex: 'count_week' },
          {
            title: '操作',
            key: 'operation',
            width: 100,
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: [],
        visible: false,
        testVisible: false,
        showPrice: false,
        areaInput: false,
        price: 0,
          type:0,
        area: 0,
          name:'',
        selfList: null,
        selfCount: false,
        // varList: {
        // 	areas: "", // 预定房屋面积
        // 	floor: "", // 预定楼层
        // 	power: "", // 预定排量
        // 	count: "", // 预定抄表
        // }
        varList: []
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      ...mapGetters(['token', 'pmsArId', 'nowMg']),
      handleChange(value) {
          this.type = value;
      },
        search_toll(v){
          this.name = v;
            this.getList();
        },
      proAdd() {
        this.$router.push({ name: 'toll_project_add' ,params: { id:'add' }})
      },
      getList() {
        getTollProject({type:this.type,name:this.name, token: this.token() })
          .then(res => {
            this.data = res.data;
            this.selfCount = true
          })
          .catch(err => {
            console.log(err)
          })
      },
      hide(info) {
        info['visible'] = false
      },
      delProject(id) {
        delTollProject({ id: id, token: this.token() })
          .then(res => {
            if (res.code == 0) {
              this.$notification.success({
                message: '成功',
                description: res.msg
              })
              this.getList()
            } else {
              this.$notification['error']({
                message: '错误',
                description: res.msg,
                duration: 4
              })
            }
          })
          .catch(err => {
            this.$notification['error']({
              message: '错误',
              description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
              duration: 4
            })
          })
      },
      addDetail(id, name,project) {
        this.$router.push({ name: 'charge_toll_detail_add', params: { edit_id:'add',name ,id:id,project_type:project} })
      },
      editDetailed(data){
        this.$router.push({ name: 'toll_project_add', params:{id:data.id}})
      },
      delDetail(info) {
        const _this = this;
        _this.$confirm({
          title: `确定要删除\"${info.name}\"项目？`,
          onOk() {
            return new Promise((resolve, reject) => {
              delTollDetail({ id:info.id ,token:_this.token()}).then(res => {
                if (res.code == 0) {
                  _this.$notification.success({
                    message: '成功',
                    description: res.msg
                  })
                  _this.getList()
                  resolve();
                } else reject(res.msg)
              }).catch(err => {
                _this.$message.error('服务器发生错误...',2);
              })
            }).catch((msg) => _this.$message.error(msg,2));
          },
          onCancel() {},
        });
      },
      editDetail(id, name) {
        this.$router.push({ name: 'charge_toll_detail_add', params: { id, name, edit_id: id } })
      },
      testCancel() {
        this.testVisible = false
        this.area = 0
        this.price = 0
        this.showPrice = false
      },
      showTest(style, f_price, price, id) {
        switch (style) {
          case 1:
            this.areaInput = true
            break
          case 2:
            this.price = '关联时手动输入金额'
            break
          case 3:
            this.showPrice = true
            this.price = f_price
            break
          case 4:
            getFormulaArg({ id }).then(res => {
              this.selfList = res.data
              this.selfCount = true
              console.log(this)
            })
        }
        this.testVisible = true
      },
        back_b(v){
          return v;
        },
      countMe(style, f_price, price,count_week, id) {
        switch (style) {
          case 1:
            
            this.showPrice = true
            this.price = price * this.area*(count_week?count_week:1)
            break
          case 4:
            comFormulaPrice({ data: this.varList, id, token: this.token() }).then(res => {
              this.price = res
              this.showPrice = true
            }).catch(err => {
              console.log(err)
            })
            break
          default:
            this.showPrice = true
            this.price=this.area
        }
      }
    }
  }
</script>

<style scoped>
</style>